<template>
  <view @touchstart="handleTouchStart" @touchend="handleTouchEnd">
<!--    文字滚动-->
    <view class="scroll-container">
      <u-notice-bar mode="horizontal" type="warning" :volume-icon="true" :list="scrollTextVal" padding="0"></u-notice-bar>
    </view>
    <view class="u-flex" style="justify-content: center;padding: 30rpx;flex-direction: column">
      <image v-if="order_status === 2" :src="imgurlBwc + '/order/use@2x.png'"
             style="width: 88rpx;height: 88rpx"></image>
      <view style="font-size: 32rpx;color: #3D3D3D;font-weight: bold;margin-top: 10rpx">
        <!--        2待使用- 3待上传- -2已驳回- 4待审核- 6待返款- 5已完成- 1待付款- -3已退款- -1已取消-->
        {{
          order_status === 2 ? '待到店使用' : order_status === -2 || order_status === 3 ? '待上传笔记' :
              order_status === -3 ? '已退款' : order_status === 1 ? "已取消" : order_status === 6 ? "待返款" : ""
        }}
      </view>
      <view class="u-flex" style="justify-content: center;font-size: 24rpx;color: #666666;margin-top: 10rpx"
            v-if="order_status !== -1 && order_status !== -3 && order_status !== 6  &&  order_status !== 3  && order_status !== 1  && order_status !== 2">
        请在
        <u-count-down
            :timestamp="findcountdown(orderDatas)"
            :show-days="true"
            :show-border="true"
            font-size="26"
            color="#FF4E0D"
            bgColor="#f4f4f4"
            separator-color="#FF4E0D"
            border-color="#f4f4f4">
        </u-count-down>
        前到店核销，超时自动取消
      </view>
    </view>

    <view class="goods_info u-flex" style="flex-direction: column;align-items: center;justify-content: center">
      <view style="height: 16rpx"></view>
      <view class="u-flex">
        <view class="goods_img">
          <image :src="packageimage(packageDetailsImages)" mode="aspectFill"></image>
        </view>
        <view class="goods_name">
          <view class="shopname">{{ packageDetails.name }}</view>
          <view class="dizhizu" style="font-size: 24rpx">
            <text v-if="packageDetails.is_reservation == 2" style="color: #fd6a00;">免预约 | 无需预约</text>
            <text v-if="packageDetails.is_reservation == 1" style="color: #fd6a00;">需预约</text>
            <text>{{weekList.otherNum}}</text>
            均可使用
          </view>
          <view class="info_tags u-flex" style="margin-top: 33rpx">
            <view style="color: #FF5F15;font-size: 30rpx">请使用领食惠探店扫码核销</view>
<!--            <view style="color: #FF5F15">探店价:￥
              <text style="font-size: 39rpx">{{
                  toFixedTwo(packageDetails.price - packageDetails.rebate_amount)
                }}
              </text>
            </view>-->
            <view style="width: 10rpx"></view>
          </view>
        </view>
      </view>
      <view v-if="order_status === 2" style="height: 16rpx"></view>
      <view v-if="order_status === 2" class="u-flex">
        <view style="height: 38rpx;width: 38rpx;background-color: #F5F5F5;border-radius: 30rpx;"></view>
        <view style=" border: 1px dashed #F5F5F5;width: 668rpx;height: 1px;flex: 1"></view>
        <view style="height: 38rpx;width: 38rpx;background-color: #F5F5F5;border-radius: 30rpx;"></view>
      </view>
      <view style="height: 16rpx"></view>
      <!--二维码图片-->
      <!--<image v-if="order_status == 2 && ewmtext != 'hello'"  style="width: 304rpx;height: 304rpx" :src="qrPath" :class="[order_status == 3?'maoboli':'']"></image>-->
      <image v-if="order_status == 2"  style="width: 304rpx;height: 304rpx" :src="qrPath" :class="[order_status == 3?'maoboli':'']"></image>

      <view v-if="ewmtext == 'hello'" class="u-flex">请求失败！请刷新页面</view>
      <view v-if="order_status == 2" style="height: 26rpx"></view>
      <view v-if="order_status == 2" class="ordersn" style="font-size: 36rpx">券码号：{{ orderDatas.verify_code }}</view>
      <view v-if="order_status == 2" class="u-flex">
        <view style="height: 38rpx;width: 38rpx;background-color: #F5F5F5;border-radius: 30rpx;"></view>
        <view style=" border: 1px dashed #F5F5F5;width: 668rpx;height: 1px;flex: 1"></view>
        <view style="height: 38rpx;width: 38rpx;background-color: #F5F5F5;border-radius: 30rpx;"></view>
      </view>
      <view class="order_tel_over" style="padding: 20rpx 0">
        <text>遇到核销问题? 点击</text>
        <text @click="Tel(orderDatas.customer_service_phone)" style="color: #FF7900">【联系平台客服解决】</text>
      </view>
    </view>

    <view class="info_address">
      <view class="left_1 text-Omit u-flex" style="align-items: center;display: flex;margin-top: 10rpx"
            @click="ToShopsDetails()">
        <view style="font-size: 28rpx;flex: 1;font-weight: bold">{{ shopsData.name }}</view>
        <image :src="imgurlBwc + '/user/right@3x.png'"
               style="width: 12rpx;height: 19rpx;;margin-left: 10rpx"></image>
      </view>
      <view class="u-flex" style="margin-top: 10rpx">
        <view class="info_address_left">
          <view class="left_2 u-flex">
            <u-icon name="clock" color="#666666"
                    size="28"></u-icon>
            {{ shopsData.open_time }}-{{ shopsData.close_time }}
          </view>
          <view class="left_2 u-flex">
            <u-icon name="map" color="#666666" size="30"></u-icon>
            <span
                class="text-Omit">
                {{ shopsData.address }}
              </span>
          </view>
        </view>
        <view class="info_address_right u-flex">
          <view class="right_1" @click="Daohang()">
            <image src="/static/tandian/address.png"></image>
            <view>导航</view>
          </view>
          <view style="width: 20rpx"></view>
          <view class="right_1" @click="Tel(shopsData.reserve_phone)">
            <image src="/static/tandian/phone.png"></image>
            <view>电话</view>
          </view>
        </view>
      </view>
    </view>

    <view class="details_info3">
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">套餐详情</view>
      </view>
      <view class="list_info_wrap" v-if="goodsData.length != 0">
        <view class="list_item" v-for="(itemg,indexg) in goodsData" :key="indexg">
          <view class="fucai" style="display: flex;align-items: center"><span></span>{{ itemg.name }}</view>
          <view class="zicai_wrap">
            <view class="zicai u-flex" v-for="(items,indexs) in itemg.list" :key="indexs">
              <view>{{ items.name }}</view>
              <view>（{{ items.num || '0' }}份）</view>
              <view v-if="items.price != '0.00'">¥{{ items.price || '0.00' }}</view>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
      </view>
    </view>

    <shop_detail :days="packageDetails.days" :usage_time="packageDetails.usage_time"
                 :activity_rules="packageDetails.activity_rules"></shop_detail>

    <!--二维码qrCode生成组件-->
    <!--<view class="erweima_box">
      <yz-qr :qrPath.sync="qrPath" :text="ewmtext" :size="qrsize" :quality="quality" :colorDark="colorDark"
             :colorLight="colorLight"></yz-qr>
    </view>-->
    <!--二维码uqrcode生成组件-->
    <view class="erweima_box">
      <canvas canvas-id="qrcode" :style="{width: '400rpx', height: '400rpx'}" />
    </view>

    <dui-appoint-date ref="opendate" :dateRange="7" @confirm="sjdconfirm"></dui-appoint-date>


    <view class="langding_wrap">
      <view class="langding_box" v-if="langdings">
        <u-loading :show="true" size="66" color="#FF4E0D"></u-loading>
      </view>
      <view class="mianban">
        <u-collapse ref="collapseOne" :head-style="headStyle" :arrow="true" :accordion="false">
          <view style="height: 30rpx;"></view>
          <view class="navigation_wrap" v-if="order_status == 3||order_status == -2||order_status == 4">
            <view class="navigation" @click="toUploadNote()">
              <text class="right_buy" style="font-size: 26rpx;color: white">上传笔记</text>
            </view>
          </view>
        </u-collapse>
      </view>
    </view>

    <!--<view style="height: 188rpx"></view>-->


    <u-popup v-model="is_zizhuShow" mode="center" width="524" border-radius="20" :mask-close-able="false"
             :closeable="true">
      <view class="tc_wrap">
        <view class="tc_info">
          <view>请确认是否已完成体验</view>
          <view>
            <span>自助核销后不支持退款，请再次确认，请在店铺工作人员面前操作</span>
          </view>
        </view>
        <view class="tc_btn_box">
          <view class="lijipay1">
            <u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="is_zizhuShow = false">取消
            </u-button>
          </view>
          <view class="lijipay">
            <u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="querenwanc()">确认完成
            </u-button>
          </view>
        </view>
      </view>
    </u-popup>

    <view style="height: 30rpx;"></view>

    <!-- #ifdef MP-WEIXIN -->
    <view class="kefu_Boxs">
      <button type="default" open-type="contact">
        <image class="kefu_icon" :src="BestImgUrl+'/PackageDetails/kefuicon.png'"></image>
      </button>
    </view>
    <!-- #endif -->

    <!-- 查看笔记 -->
    <u-popup v-model="LookTaoCanShow" mode="bottom" border-radius="34" :closeable="true">
      <view class="lookbiji_wrap">
        <view class="popup_title">领取笔记</view>
        <view class="neirongquyu">
          <view>
            <text>{{ BiJiCenter || '暂无笔记，请求点击重新生成' }}</text>
          </view>
        </view>
        <view class="tishini">
          <image class="xhr1" :src="BestImgUrl + '/xhr1.png'"></image>
          <image class="xhr2" :src="BestImgUrl + '/xhr2.png'"></image>
          <view>
            以上内容是为您呈上的探店笔记，为您探店之旅提供参考。不过，探店体验因人而异，请结合您的真实感受，书写属于自己的独特探店篇章。
          </view>
        </view>
        <view class="anniuizu">
          <view @click="lingqubiji(1)">重新生成</view>
          <view @click="Fuzhibiji()">复制该笔记</view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import Shop_detail from "@/components/shop/shop_detail.vue";

const app = getApp();
import store from '@/public/store.js'
// import {isArray} from "uview-ui/libs/luch-request/utils";
import uQRCode from "@/components/UQRCode/uqrcode";

export default {
  components: { Shop_detail},
  data() {
    return {
      langdings: true,
      order_status: 0,
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,
      headStyle: {
        color: '#333',
        backgroundColor: '#fff',
        borderBottom: '1px solid #f7f7f7',
        padding: '0 20rpx',
        borderRadius: '12px 12px 0 0'
      },
      Tabslist: [{
        name: '套餐核销码'
      }, {
        name: '套餐详情'
      }],
      TabsCurrent: 0,
      Urllink: '',

      action: store.state.baseUrl + '/api/order/upload',
      fileList: [],
      HeaDers: {
        'authorization': uni.getStorageSync('token')
      },
      fileLiatData3: [],
      FileList3: '', //已上传截图

      //qrCode二维码设置
      qrPath: '',
      ewmtext: 'hello', //qrCode
      uqrCodeText: '', // uqrcode
      uqrCodeSize: 200,
      qrsize: 200,
      quality: 'L',
      colorDark: '#000000',
      colorLight: '#ffffff',

      orderID: '', //订单ID
      shopsID: '', //店铺ID
      packageID: '', //套餐ID
      orderDatas: {}, //订单详情数据
      shopsData: {}, //商家信息数据
      customerPhone: '', // 平台电话号码
      packageDetails: {},
      goodsData: [],
      userInfo: {},
      packageDetailsImages: [],
      subject: [],

      is_zizhuShow: false,
      myRenZhengData: {
        account: "",
        fans: "",
        likes: "",
        platform_icon: "",
        platform_name: "",
        platform_type: 0
      },

      YuJiDaoDian: '',
      showShiJianDuan: false,
      LookTaoCanShow: false,
      BiJiCenter: '',
      reservationDateTime: [],
      reservation_datetime: [],
      startTime: '',
      endTime: '',
      scrollTextVal: [], //顶部文字滚动变量
      someTimer: '', //页面轮询定时器
      weekList: {//获取使用须知、规则时间数据
        maxNum: '',
        minNum: '',
        otherNum: '',
      },
      startX: 0, // 触摸开始位置X坐标
      endX: 0, // 触摸结束位置X坐标
      orderType: 0, //是否是订单类型
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/xhs@2x.png',
          fileList: [],
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/dy@2x.png',
          fileList: [],
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/dzdp@2x.png',
          fileList: [],
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/mt@2x.png',
          fileList: [],
        },
      ],
    }
  },
  onLoad(ops) {
    let Details = JSON.parse(decodeURIComponent(ops.data))
    console.log('ops', ops)
    this.orderType = ops.type;
    //订单ID
    this.orderID = Details.id
    //店铺ID
    this.shopsID = Details.shop_id
    //套餐ID
    this.packageID = Details.shop_package_id
    this.lingqubiji('')
    // 每5秒刷新一次页面，监听订单状态
    /* this.someTimer = setInterval(() => {
      this.GetDatails()
    }, 5000) */

  },
  onShow() {
    let that = this
    //获取订单详情
    this.GetDatails()
    //获取我的信息
    this.GetMyinfo()
  },
  onReady() {
  //   获取滚动文字接口
    this.$api.GetScrollText({}).then(res => {
      this.scrollTextVal = [res.data.result.content]
    }).catch(err => {
      uni.showToast({
        title: '获取滚动文字失败，请联系管理员。',
        icon: 'none'
      })
    })

  },
  methods: {

    toUploadNote() {
      let that = this
      clearInterval(this.someTimer);
      this.someTimer = null
      let source = 'order'
      uni.navigateTo({
        url: '/sub_account/pages/upload_note?data=' + encodeURIComponent(JSON.stringify(that.orderDatas)) +  '&source=' + source
      })
    },
    lingqubiji(val) {
      let that = this
      that.$api.LingquBijiCopy({
        order_id: that.orderID,
        regenerate: val //重新生成文案，需要添加参数regenerate=1
      }).then(res => {
        that.BiJiCenter = res.data.result.content
        console.log('领取笔记', res.data.result)
      }).catch(err => {

      })
    },
    Fuzhibiji() {
      uni.setClipboardData({
        data: this.BiJiCenter, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      });
    },
    opens() {
      this.$refs.chooseTime.open()
    },
    //选择的时间
    changeTime(e) {
      console.log('选择的到店时间', e)
      //this.dayTime = e.value
    },
    OpenSjd() {
      let that = this
      let data = {
        reservationDateTime: that.reservationDateTime,
        reservation_datetime: that.reservation_datetime,
        startTime: that.startTime,
        endTime: that.endTime,
      }
      that.$refs.opendate.inits(data)
    },
    sjdconfirm(e) {
      let that = this
      console.log('选择的到店时间', e)
      that.YuJiDaoDian = e.date + ' ' + e.start_time

      let start_time = e.date + ' ' + e.start_time
      let end_time = e.date + ' ' + e.end_time

      that.$api.SetDaoDianShiJian({
        order_id: that.orderID,
        reservation_start_time: start_time,
        reservation_end_time: end_time
      }).then(res => {
        that.GetDatails()
      }).catch(err => {
        that.orderDatas.reservation_start_time = ""
        that.YuJiDaoDian = ""
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 3000
        });
      })
    },
    toFixedTwo(val) {
      var str = Number(val).toFixed(2)
      return str;
    },
    GetDatails() {
      let that = this
      that.$api.GetTanDianOrderDetails({
        order_id: this.orderID,
        // is_new: '1',
        // client: ''
      }).then(res => {
        console.log('订单详情', res.data.result);
        that.orderDatas = res.data.result //订单详情
        //店铺ID
        this.shopsID = that.orderDatas.shop_id
        //套餐ID
        this.packageID = that.orderDatas.shop_package_id
        // 处理平台数据
        if(that.orderDatas.is_multi_platform == 1){
          const noteArr = []
          const note = JSON.parse(that.orderDatas.note_platforms)
          note.forEach((item2, index2) => {
            that.platformData.forEach((item3, index3) => {
              if (item3.platformType == item2) {
                noteArr.push({
                  platformType: item3.platformType,
                  title: item3.title,
                  image: that.imgurlBwc + item3.image,
                  fileList: [],
                })
              }
            })
          })
          that.orderDatas.note_platforms = noteArr
        } else {
          that.platformData.forEach((item3, index3) => {
            if (item3.platformType == that.orderDatas.platform_type) {
              that.orderDatas.platform_type = {
                platformType: item3.platformType,
                title: item3.title,
                image: that.imgurlBwc + item3.image,
                fileList: [],
              }
            }
          })
        }
        console.log('订单详情===', that.orderDatas);

        // 到店核销后刷新订单列表页面
        if (res.data.result.status === 3){
          uni.showToast({
            title: '用餐已完成，快点去上传笔记吧',
            icon: 'none'
          })
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/orders/orders'
            })
          }, 1000)
        }
        //设置订单状态
        /*
          1待付款
          2已付款
          3已核验（等待上传）
          4待审核（已上传）
          5已完成
          -1已取消(超时、自动)
          -2已驳回（审核失败）
          -3已退款（金额原路返回）
        */
        that.order_status = res.data.result.status

        that.reservationDateTime = res.data.result.reservation_date_time.date
        that.reservation_datetime = res.data.result.reservation_datetime

        that.startTime = res.data.result.reservation_date_time.start_time
        that.endTime = res.data.result.reservation_date_time.end_time

        that.shopsData = res.data.result.shop //店铺信息
        that.packageDetails = res.data.result.package //套餐数据
        that.goodsData = res.data.result.package.goods //套餐商品
        that.packageDetailsImages = res.data.result.package.images //套餐图片数组
        that.subject = res.data.result.package.subject //热门话题#
        that.myRenZhengData = res.data.result.platform_account
        that.customerPhone = res.data.result.customer_service_phone //平台电话号码

        that.ewmtext = res.data.result.verify_code //设置二维码的值
        that.uqrCodeText = res.data.result.verify_code //uqrcode设置二维码的值
        that.ChongxinDingyi() //重置面板高度
        that.make(res.data.result.verify_code)

        setTimeout(() => {
          that.langdings = false
        }, 2000)
        //把数组字符串转换为数组数字
        let weekArr = Object.values(res.data.result.package.week).map(item => parseInt(item))
        //改变数据类型
        const weekData = weekArr.map(num => ({
          1: {title: '一', num: '1'},
          2: {title: '二', num: '2'},
          3: {title: '三', num: '3'},
          4: {title: '四', num: '4'},
          5: {title: '五', num: '5'},
          6: {title: '六', num: '6'},
          7: {title: '日', num: '7'}}[num]));
        //判断是否连续
        if(this.isArrayContinuous(weekArr)){
          that.weekList = {}
          weekData.forEach((item, index) => {
            if (item.num == Math.max(...weekArr)) {
              that.weekList.maxNum = "星期"+item.title
            } else if(item.num == Math.min(...weekArr)) {
              that.weekList.minNum = "星期"+item.title
            }
          });
          that.weekList.otherNum = that.weekList.minNum + "到" + that.weekList.maxNum
          // console.log('是连续数字',that.weekList)
        }else{
          that.weekList.otherNum = ''
          weekData.forEach((item, index) => {
            that.weekList.otherNum += "星期"+item.title+","
          })
          // console.log('不是连续数字',that.weekList)
        }
      }).catch(err => {
        that.langdings = false
      })
    },
    //计算数组是否连续
    isArrayContinuous(arr) {
      const min = Math.min(...arr);
      const max = Math.max(...arr);
      const expectedLength = max - min + 1; // 计算理论上应有的长度
      const seen = new Set(arr); // 使用Set来记录已经出现的数字

      // 检查是否所有数字都出现过
      for (let i = min; i <= max; i++) {
        if (!seen.has(i)) {
          return false;
        }
      }
      return true;
    },
    GetMyinfo() {
      let that = this
      that.$api.GetuserInfo({}).then(res => {
        console.log('个人信息', res.data.result);
        that.userInfo = res.data.result
      }).catch(err => {

      })
    },
    Daohang() {
      wx.openLocation({
        latitude: Number(this.shopsData.latitude),
        longitude: Number(this.shopsData.longitude),
        scale: 18,
        name: this.shopsData.name,
        address: this.shopsData.address
      });
    },
    Tel(res) {
      if(!res){
        uni.showToast({
          title: '手机号为空，请联系管理员添加手机号。谢谢！',
          icon: 'none',
          duration: 3000
        })
      }else{
        let phone = ''
        if (isArray(res)){
          phone = res[0]
          console.log('phone1==', phone)
        }else {
          phone = res
          console.log('phone2==', phone)
        }
        uni.makePhoneCall({
          phoneNumber: phone, // 电话号码
          success: function () {
            console.log('拨打电话成功');
          },
          fail: function () {
            console.log('拨打电话失败');
          }
        });
      }
    },
    packageimage(data) {
      return data[0]
    },
    //倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      let endTime = new Date(item.end_time).getTime()
      let isend = endTime - now > 0 ? (endTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      console.log('结束时间', seconds)
      return seconds
    },
    Tijiao() {
      let that = this
      if (that.myRenZhengData.account == "") {
        uni.showToast({
          title: '请先认证平台账户',
          icon: 'none',
          duration: 3000
        })
      } else if (that.Urllink == '') {
        uni.showToast({
          title: '请输入链接',
          icon: 'none',
          duration: 3000
        })
      } else if (that.FileList3 == '') {
        uni.showToast({
          title: '请上传截图',
          icon: 'none',
          duration: 3000
        })
      } else {
        that.$api.TiJiaoTanDian({
          order_id: that.orderID,
          images: that.FileList3,
          url: that.Urllink
        }).then(res => {
          console.log('提交探店', res.data.result);
          uni.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 3000
          });
          //获取订单详情
          // that.is_zizhuShow = false
          // that.langdings = true
          // that.GetDatails()
          //uni.$emit("orderRef",4)
          setTimeout(() => {
            //uni.navigateBack();
            uni.reLaunch({
              url: '/subpackageA/pages/orders/orders?types=' + 4
            })
          }, 2000);

        }).catch(err => {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 3000
          });
        })
      }
    },
    querenwanc() {
      let that = this
      that.$api.TDheyanmoniOrder({
        order_id: this.orderID
      }).then(resss => {
        that.is_zizhuShow = false
        that.langdings = true
        that.GetDatails()
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
      })
    },


    //订单号和下单时间上传回调
    // onCchange1(e) {
    // 	let that = this
    // 	uni.hideLoading();
    // 	let resuleok = JSON.parse(e.data)
    // 	console.log('上传截图', resuleok)
    // 	that.FileList3 = resuleok.result.show_path

    // 	//重新定义面板高度
    // 	this.ChongxinDingyi()
    // },
    // onRemove1(e) {
    // 	this.FileList3 = ''
    // },

    Upsuccess3(e) {
      console.log('上传的图e', e)
      this.fileLiatData3.push(e.result.show_path);
      var filelist = this.fileLiatData3.join(",");
      this.FileList3 = filelist;
      console.log('上传的图', this.FileList3)
      //重新定义面板高度
      this.ChongxinDingyi()
    },
    Remove(e) {
      this.fileLiatData3.splice(e, 1)
      //console.log('移除图片',e)
      var filelist = this.fileLiatData3.join(",");
      this.FileList3 = filelist;
    },
    Towode() {
      uni.navigateTo({
        url: '/subpackageA/pages/Certification/Certification'
      })
    },
    Tabschange(index) {
      this.TabsCurrent = index;
      this.ChongxinDingyi()
    },
    ChongxinDingyi() {
      //重新定义面板高度
      // #ifdef APP-PLUS
      setTimeout(() => {
        this.$refs.collapseOne.init();
      }, 500)
      // #endif
      // #ifdef MP-WEIXIN || H5
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.collapseOne.init();
        }, 200)
      });
      // #endif
    },
    ToShopsDetails(id) {
      // console.log('套餐ID==', this.packageID, this.shopsID)
      uni.navigateTo({
        url: '/subpackageB/pages/shopsDetails/shopsDetails?package_id=' + this.packageID + '&shops_id=' + this.shopsID
      })
    },
    //右滑动返回首页
    handleTouchStart(e) {
      console.log('开始滑动', e.touches[0].pageX)
      this.startX = e.touches[0].pageX; // 获取触摸开始位置的X坐标
    },
    handleTouchEnd(e) {
      console.log('结束滑动', e.changedTouches[0].pageX)
      this.endX = e.changedTouches[0].pageX; // 获取触摸结束位置的X坐标
      if (this.endX - this.startX > 100) { // 判断是否左滑，并且滑动距离大于50px
        if (!this.orderType){
          uni.switchTab( {
            url: '/pages/index/index'
          })
        }
      }
    },
    // 生成二维码
    make(code) {
      let that = this
      if (!code){
        uni.showModal({
          title: '提示',
          content: '获取卷码号失败，请点击刷新页面',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              that.GetDatails()
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
      uni.showLoading({
        title: '二维码生成中',
        mask: true
      })
      uQRCode.make({
        canvasId: 'qrcode',
        text: code,
        size: that.uqrCodeSize,
        margin: 10,
        success: res => {
          that.qrPath = res
          console.log('二维码图片路径= ', res, code);
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },
  },
  // 销毁页面轮询定时器
  beforeDestroy() {
    clearInterval(this.someTimer);
    this.someTimer = null
  },
}
</script>

<style lang="scss">
page {
  background-color: #F4F4F4;
}
// 顶部文字滚动css
.scroll-container {
  overflow: hidden; /* 隐藏溢出的部分 */
  white-space: nowrap; /* 防止文字换行 */
  position: relative; /* 定位容器 */
  height: 50rpx;
  line-height: 50rpx;
  background: #FFF8E8;
}
.scroll-icon{
  position: absolute;
  left: 0rpx;
  top: 6rpx;
  z-index: 10;
  width: 50rpx;
  height: 50rpx;
  background: #FFF8E8;
}
.scroll-text {
  color: #FF9746;
  font-size: 28rpx;
  position: absolute;
  white-space: nowrap; /* 防止文字换行 */
  animation: scrollText 10s linear infinite; /* 应用动画 */
}

@keyframes scrollText {
  0% { transform: translateX(100%); } /* 初始位置在右侧 */
  100% { transform: translateX(-100%); } /* 最终位置在左侧，超出容器范围 */
}
.bef_line {
  width: 10rpx;
  border-radius: 20rpx;
  height: 30rpx;
  background-color: #fd6a00;
}

.base-coupons {
  width: 250px;
  height: 100px;
  position: relative;
  background: radial-gradient(circle at right top, transparent 6px, #ffb3a7 0) top left / 24% 50% no-repeat, radial-gradient(circle at right bottom, transparent 6px, #ffb3a7 0) bottom left /60px 51% no-repeat, radial-gradient(circle at left top, transparent 6px, #ffb3a7 0) top right /190px 51% no-repeat, radial-gradient(circle at left bottom, transparent 6px, #ffb3a7 0) bottom right /190px 51% no-repeat;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .2));
  border-radius: 4px;
}

.base-coupons::before {
  content: '';
  height: 80px;
  border: 1px dashed #fff;
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.lingqujietu {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 702rpx;
    height: 98rpx;
    margin: 0 auto;
  }
}

.langding_wrap {
  position: relative;

  .langding_box {
    background-color: #F4F4F4;
    position: absolute;
    width: 100%;
    height: 3000rpx;
    z-index: 99;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 50rpx;
  }
}

.erweima_box {
  position: fixed;
  top: -1000rpx;
  left: -1000rpx;
  z-index: -1;
  opacity: 0;
}

.subtitle {
  font-weight: bold;
  font-size: 32rpx;
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  width: 100%;

  span {
    font-weight: initial;
    font-size: 28rpx;
    margin-left: auto;
  }

  .wc_color {
    color: #00A556;
    margin-left: auto;
  }

  .jxz_color {
    color: #FF4910;
    margin-left: 10rpx;
    border: 1px solid #FF4910;
    font-weight: initial;
    border-radius: 200rpx;
    font-size: 28rpx;
    padding: 6rpx 16rpx;
  }

  .noStart_color {
    color: #999999;
    margin-left: auto;
  }
}

.sm_box_tiem {
  background-color: #ffffff;
  border-radius: 0 0 20rpx 20rpx;
  padding: 30rpx;

  .buzhoutiao_box {
    .tishi {
      .yjdaodian {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #F9F9F9;
        border-radius: 10rpx;
        padding: 20rpx;
        border: 1px solid #D9D9D9;
        margin-bottom: 14rpx;

        span {
          color: #FF4E0D;
        }
      }

      .yjddtishi {
        padding: 0;
        border-radius: 10rpx;
        color: #FF4E0D;
        font-size: 28rpx;
      }
    }

    .tabs_box {
      margin-top: 28rpx;
    }

    .erweima {
      text-align: center;
      margin-top: 30px;

      .ewm {
        width: 238rpx;
        height: 238rpx;
      }

      .maoboli {
        filter: blur(6px);
      }

      .ordersn {
        text-align: center;
        margin: 20rpx 0 0 0;
        font-size: 28rpx;
        color: $zzy-text-color-666666;
      }

      .hxbtn {
        width: 334rpx;
        height: 72rpx;
        text-align: center;
        line-height: 72rpx;
        margin: 30rpx auto 0;
        background-color: #FF4E0D;
        border-radius: 200rpx;
        color: #ffffff;
      }

      .hxbtny {
        width: 334rpx;
        height: 72rpx;
        text-align: center;
        line-height: 72rpx;
        margin: 30rpx auto 0;
        background-color: #999999;
        border-radius: 200rpx;
        color: #ffffff;
      }
    }

    .details_info3 {
      background-color: #ffffff;
      border-radius: 28rpx;
      margin: 30rpx 0 0 0;

      .title {
        font-size: 30rpx;
        color: $zzy-text-color-333333;
        font-weight: bold;
        width: 200rpx;
        height: 54rpx;
        margin-bottom: 28rpx;
      }

      .list_info_wrap {
        align-items: center;
        padding: 0 22rpx 0 22rpx;
        margin-top: 20rpx;

        .list_tile {
          color: $zzy-text-color-333333;
          font-weight: bold;
          font-size: 28rpx;
          align-items: center;

          span {
            display: inline-block;
            width: 6rpx;
            height: 6rpx;
            border-radius: 200rpx;
            background-color: $zzy-text-color-999999;
            margin-right: 10rpx;
          }
        }

        .list_item {
          align-items: flex-start;
          margin-top: 20rpx;
          padding-left: 0;

          .fucai {
            font-size: 28rpx;
            color: $zzy-text-color-333333;
            flex: 1;
            font-weight: bold;

            span {
              display: inline-block;
              width: 10rpx;
              height: 10rpx;
              background-color: #d4d4d4;
              border-radius: 200rpx;
              margin-right: 14rpx;
            }
          }

          .zicai_wrap {
            padding-left: 22rpx;
          }

          .zicai {
            view:nth-child(1) {
              font-size: 28rpx;
              color: $zzy-text-color-666666;
              flex: 1;
            }

            view:nth-child(2) {
              font-size: 28rpx;
              color: $zzy-text-color-666666;
              margin-left: auto;
            }

            view:nth-child(3) {
              font-size: 28rpx;
              color: $zzy-text-color-666666;
              font-weight: bold;
              margin-left: auto;
            }
          }
        }
      }
    }

    .details_info2 {
      .info_list {
        padding: 0 10rpx 20rpx 10rpx;
        align-items: flex-start;

        view {
          color: $zzy-text-color-333333;
          font-size: 28rpx;
          font-weight: bold;
        }

        span {
          padding: 0 0 0 20rpx;
          color: $zzy-text-color-333333;
          font-size: 28rpx;
          display: inline-block;
          flex: 1;
        }
      }
    }

    .my_info_box {
      border-radius: 28rpx;
      background-color: #F4F4F4;
      padding: 28rpx;

      .title {
        font-size: 28rpx;
        font-weight: 600;
        color: $zzy-text-color-333333;
      }

      .my-info {
        align-items: center;
        background-color: #ffffff;
        padding: 28rpx;
        border-radius: 28rpx;
        margin-top: 28rpx;
        position: relative;

        .pttype {
          position: absolute;
          top: 0;
          left: 0;
          width: auto;
          height: 38rpx;
          z-index: 2;
          display: inline-block;
          background-color: #E54200;
          color: #ffffff;
          font-size: 28rpx;
          text-align: center;
          line-height: 38rpx;
          border-radius: 14rpx 0;
          padding: 0 10rpx;
        }

        .my-tx {
          border-radius: 200rpx;
          width: 96rpx;
          height: 96rpx;
          background-color: #F4F4F4;
        }

        .my-name {
          padding-left: 20rpx;

          view:nth-child(1) {
            font-size: 28rpx;
            color: $zzy-text-color-333333;
            font-weight: bold;
          }

          view:nth-child(2) {
            color: $zzy-text-color-999999;
            font-size: 22rpx;
          }
        }

        .right-icon {
          margin-left: auto;
          border-radius: 200rpx;
          background-color: #FEFBF9;
          width: 64rpx;
          height: 64rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .box_on_wrap {
      margin-top: 52rpx;

      .box_on_title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        view:nth-child(1) {
          color: $zzy-text-color-333333;
          font-size: 28rpx;
          font-weight: bold;
        }

        view:nth-child(2) {
          color: #FF4E0D;
          font-size: 28rpx;
        }
      }

      .tishi_box {
        margin-top: 20rpx;
        text-align: left;
        border-radius: 10rpx;
        padding: 28rpx;
        background-color: #FFEDE7;
        color: #FF4E0D;
        font-size: 28rpx;
      }

      .upload_box {
        margin-top: 20rpx;
        position: relative;
        left: -10rpx;
      }

      .input_box {
        margin-top: 20rpx;
        border-radius: 200rpx;
        border: 1px solid #D9D9D9;
        padding: 4rpx 28rpx;
        background-color: #F9F9F9;
      }
    }
  }
}

.subOrder {
  width: 100%;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  margin: 30rpx auto 0;
  background-color: #FF4E0D;
  border-radius: 200rpx;
  color: #ffffff;
}


.order_list_wrap {
  margin-bottom: 30rpx;
  border-radius: 0 0 28rpx 28rpx;
  padding: 16rpx 28rpx 28rpx 28rpx;
  background-color: #ffffff;

  .order_list_item {
    .order_title {
      align-items: center;
      justify-content: space-between;

      .shop_title {
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 6rpx;
        }

        text {
          color: $zzy-text-color-999999;
          font-size: 28rpx;
          -webkit-line-clamp: 1;
        }
      }

      .status {
        flex: 1;
        text-align: right;
        font-size: 28rpx;

        .color1 {
          color: #FF4E0D;
        }

        .color2 {
          color: #00AA3B;
        }
      }
    }

    .goods_info {
      align-items: flex-start;
      margin-top: 28rpx;

      .goods_img {
        width: 120rpx;
        height: 120rpx;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 16rpx;
        }
      }

      .goods_name {
        padding-right: 16rpx;
        flex: 1;
        margin-bottom: 28rpx;

        .title {
          font-size: 34rpx;
          font-weight: bold;
          color: $zzy-text-color-333333;
        }

        .tags_box {
          margin-top: 16rpx;

          .u-tag {
            margin-right: 10rpx;
          }
        }
      }
    }

    .buzhou_tiao {
      margin-top: 20rpx;
      align-items: center;
      justify-content: space-between;

      .youjian {
        width: 36rpx;
        height: 36rpx;
        margin: 0 10rpx;

        image {
          width: 36rpx;
          height: 36rpx;
        }
      }

      .buzhou_tiao_item {
        flex: 1;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;

        .biaohao {
          width: 28rpx;
          height: 28rpx;
          margin-right: 4rpx;
        }

        .lvse {
          color: #30CC04;
        }

        .huise {
          color: #999999;
        }

        text {
          font-size: 20rpx;
        }
      }
    }

    .info_address {
      align-items: center;
      justify-content: space-between;
      margin-top: 32rpx;
      border-bottom: 1px dashed #D9D9D9;
      padding-bottom: 28rpx;

      .info_address_left {
        flex: 1;

        .left_1 {
          font-weight: bold;
          font-size: 28rpx;
          align-items: center;
          -webkit-line-clamp: 1;
        }

        .left_2 {
          align-items: center;
          margin-top: 12rpx;
          color: $zzy-text-color-666666;
          font-size: 28rpx;

          .text-Omit {
            -webkit-line-clamp: 1;
          }

          .u-icon {
            margin-right: 10rpx;
          }
        }
      }

      .info_address_right {
        align-items: center;
        justify-content: center;

        .right_1 {
          text-align: center;
          flex: 1;
          margin: 0 0 0 30rpx;

          image {
            width: 56rpx;
            height: 56rpx;
            margin-bottom: 6rpx;
          }

          color: $zzy-text-color-666666;
          font-size: 22rpx;
        }
      }
    }
  }
}

.tc_wrap {
  padding: 30rpx;
  text-align: center;

  .guanyu_title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .wenan {
    color: #999;
    margin-bottom: 20rpx;
  }

  .tc_images {
    image {
      width: 300rpx;
      height: 300rpx;
    }
  }

  .steup_info {
    text-align: left;
    margin-top: 30rpx;

    .yqoiu {
      view:nth-child(1) {
        color: #666;
      }
    }

    .yqoiu2 {
      color: #666;

      span {
        color: #FE7B20;
      }
    }
  }

  .tc_info {
    view:nth-child(1) {
      font-weight: bold;
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }

    view:nth-child(2) {
      font-size: 28rpx;
      color: #999;

      span {
        color: #FF4E0D;
      }
    }

    .gif_tu {
      width: 100%;
      height: 528rpx;
      border-radius: 20rpx;
    }
  }

  .tc_btn_box {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    justify-content: center;

    .tc_btn_huise {
      flex: 1;
      margin-right: 12rpx;
      background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
      color: #333333;
    }

    .tc_btn_huise_err {
      flex: 1;
      background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
      color: #fff;
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
    }

    .lijipay1 {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 20rpx 0 0;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
        color: #333;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }

    .lijipay {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 auto;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
        color: #fff;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }
  }
}


.kefu_Boxs {
  position: fixed;
  z-index: 1000;
  z-index: 9992;
  bottom: 200rpx;
  right: 0;
  background-color: #ffffff;
  padding: 10rpx 30rpx 10rpx 10rpx;
  border-radius: 200rpx 0 0 200rpx;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.10);
  margin: 10px 0 10px 5px; //让出阴影位置

  .kefu_icon {
    width: 70rpx;
    height: 70rpx;
  }

  /deep/ button {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  /deep/ button::after {
    border: none !important;
  }
}


.lookbiji_wrap {
  padding: 30rpx;
  background-color: #F4F4F4;

  .popup_title {
    font-weight: bold;
    font-size: 34rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .neirongquyu {
    background-color: #ffffff;
    border-radius: 26rpx;
    padding: 30rpx;
  }

  .tishini {
    position: relative;
    margin: 90rpx 0 30rpx 0;

    .xhr1 {
      position: absolute;
      top: -76rpx;
      left: 20rpx;
      width: 124.36rpx;
      height: 107.51rpx;
      z-index: 1;
    }

    .xhr2 {
      position: absolute;
      z-index: 4;
      top: -24rpx;
      left: 20rpx;
      width: 38rpx;
      height: 38rpx;
    }

    view {
      background-color: #F8F2D6;
      padding: 20rpx;
      border-radius: 20rpx;
      position: relative;
      z-index: 3;
      color: #FF4E0D;
    }
  }

  .anniuizu {
    display: flex;
    align-items: center;
    justify-content: center;

    view:nth-child(1) {
      flex: 1;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      background-color: #ffffff;
      border: 1px solid #FF4E0D;
      border-radius: 200rpx;
      color: #FF4E0D;
      margin-right: 10rpx;
    }

    view:nth-child(2) {
      flex: 1;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      background-color: #FF4E0D;
      border: 1px solid #FF4E0D;
      border-radius: 200rpx;
      color: #ffffff;
      margin-left: 10rpx;
    }
  }

}

.goods_info {
  background-color: #ffffff;
  padding: 20rpx;
  align-items: center;
  border-radius: 28rpx;
  margin: 0 20rpx;

  .goods_img {
    width: 168rpx;
    height: 168rpx;

    image {
      width: 168rpx;
      height: 168rpx;
      border-radius: 16rpx;
    }
  }

  .goods_name {
    padding-left: 16rpx;
    flex: 1;

    .shopname {
      font-weight: bold;
      font-size: 30rpx;
      color: $zzy-text-color-333333;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .info_tags {
      margin-top: 6rpx;
    }

    .dizhizu {
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      margin-top: 10rpx;
      color: $zzy-text-color-999999;
      flex: 1;
      word-break: break-all;
    }
  }
}

.info_address {
  align-items: center;
  justify-content: space-between;
  border-radius: 28rpx;
  background-color: #ffffff;
  padding: 28rpx;
  margin: 20rpx 20rpx 0;

  .info_address_left {
    flex: 1;

    .left_1 {
      font-weight: bold;
      font-size: 28rpx;
      align-items: center;
      -webkit-line-clamp: 1;
    }

    .left_2 {
      align-items: center;
      margin-top: 12rpx;
      color: $zzy-text-color-666666;
      font-size: 28rpx;

      .text-Omit {
        -webkit-line-clamp: 1;
      }

      .u-icon {
        margin-right: 10rpx;
      }
    }
  }

  .info_address_right {
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;

    .right_1 {
      text-align: center;
      flex: 1;
      margin: 0 0 0 30rpx;

      image {
        width: 39rpx;
        height: 39rpx;
        margin-bottom: 6rpx;
      }

      color: $zzy-text-color-666666;
      font-size: 22rpx;
    }
  }
}

.details_info3 {
  padding: 32rpx 28rpx;
  background-color: #ffffff;
  border-radius: 28rpx;
  margin: 20rpx;

  .title {
    font-size: 30rpx;
    color: $zzy-text-color-333333;
    font-weight: bold;
    width: 200rpx;
    height: 54rpx;
    margin-bottom: 28rpx;
  }

  .list_info_wrap {
    align-items: center;
    padding: 0 22rpx 0 22rpx;
    margin-top: 20rpx;

    .list_tile {
      color: $zzy-text-color-333333;
      font-weight: bold;
      font-size: 28rpx;
      align-items: center;

      span {
        display: inline-block;
        width: 9rpx;
        height: 9rpx;
        border-radius: 200rpx;
        background-color: $zzy-text-color-999999;
        margin-right: 10rpx;
      }
    }

    .list_item {
      align-items: flex-start;
      margin-top: 20rpx;
      padding-left: 0;

      .fucai {
        font-size: 28rpx;
        color: $zzy-text-color-333333;
        flex: 1;
        font-weight: bold;

        span {
          display: inline-block;
          width: 10rpx;
          height: 10rpx;
          background-color: #d4d4d4;
          border-radius: 200rpx;
          margin-right: 14rpx;
        }
      }

      .zicai_wrap {
        padding-left: 22rpx;
      }

      .zicai {
        margin-top: 12rpx;

        view:nth-child(1) {
          font-size: 28rpx;
          color: $zzy-text-color-666666;
          flex: 1;
        }

        view:nth-child(2) {
          font-size: 28rpx;
          color: $zzy-text-color-666666;
          margin-left: auto;
        }

        view:nth-child(3) {
          font-size: 28rpx;
          color: $zzy-text-color-666666;
          font-weight: bold;
          margin-left: auto;
        }
      }
    }
  }
}

.navigation_wrap {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
  background-color: #ffffff;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 16rpx 16rpx 16rpx;

  .right_buy {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fd7800;
    height: 88rpx;
    border-radius: 200rpx;
    text-align: center;
  }
}

</style>